<template>
  <div>
      <header class="common-header">
        <!-- 左侧logo -->
        <div class="logo">
          <img src="@/assets/logo.png" alt="Logo" />
        </div>
        <!-- 中间导航 -->
        <nav class="nav-menus">
          <ul>
            <li v-for="(menu, index) in menus" :key="index" :class="[$route.path.startsWith(menu.path) ? 'header__navitem--active' : '']">
              <router-link :to="menu.path">{{ menu.name }}</router-link>
            </li>
          </ul>
        </nav>
        <!-- 右侧用户信息 -->
        <div class="user-info" v-if="isLogin">
           <el-input
            v-model="search"
            placeholder="搜索"
            class="search-input"
            rounded
          >
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
          <img class="user-img" src="@\assets\sssre.jpg" alt="头像加载失败" @click="toPersonalPage" />
          <!-- <span class="username">{{ username }}</span> -->
        </div>
        <el-button type="primary" v-else @click="toLoginPage">登录</el-button>
      </header>
      <main>
        <NuxtPage />
      </main>
      <footer>
        <p>© 2023 公司名称. 保留所有权利.</p>
      </footer>
      <el-backtop :right="100" :bottom="100" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
const router = useRouter();
const username = ref("森森森RE"); // 模拟用户名
const isLogin = ref(true); // 模拟登录状态
const search = ref("");
const toPersonalPage = () => router.push("/personal");
const toLoginPage = () => router.push("/login");

const menus = [
  { name: "首页", icon: "el-icon-home", path: "/home" },
  { name: "社区", icon: "el-icon-message", path: "/community" },
  { name: "消息", icon: "el-icon-bell", path: "/notifications" },
  { name: "我的", icon: "el-icon-more", path: "/personal" },
];
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.common-header {
  color: #92b09b;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #3b6c3b;
  position: sticky;
  top: 0;
  z-index: 1000;
}
main {
  margin: 0;
  padding: 0;
}
.logo img {
  height: 40px;
}
nav ul {
  list-style: none;
  gap: 0;
}
nav ul li {
  display: inline;
}
nav ul li a {
  text-decoration: none;
  color: #eee;
  padding: 15px 20px;
  display: inline-block;
  font-size: 16px;
}
nav ul li a:hover {
  background-color: #2c512b;
  /* 加粗 */
  font-weight: bold;
  border-radius: 4px;
}
.user-info {
  display: flex;
  align-items: center;
}
.user-info .username {
  margin-right: 10px;
}
.user-info button {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.user-info button:hover {
  background-color: #0056b3;
}
footer {
  text-align: center;
  padding: 10px;
  background-color: #f5f5f5;
  position: relative;
  bottom: 0;
  width: 100%;
}
main {
  min-height: calc(
    100vh - 120px
  ); /* Adjust based on header and footer height */
}
.header__navitem {
  display: inline-block;
  padding: 21px 0;
  width: 68px;
  height: 62px;
  text-align: center;
  vertical-align: top;
  color: #fff;
  cursor: pointer;
  position: relative;
  font-size: 14px;
}
/** 如果是当前被选中的菜单按钮,高亮显示 */
.header__navitem--active {
  background-color: #2c512b;
  color: #fff;
}
.header__navitem--active .header__navicon {
  color: #fff;
}
.header__navicon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 5px;
  font-size: 24px;
  color: #333;
}
.header__navtext {
  font-size: 12px;
  color: #333;
}
.user-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.search-input {
  width: 150px;
  margin-right: 20px;
  /* background-color: #fff; */
  --el-input-height: 32px;
  --el-input-padding-horizontal: 10px;
  --el-input-font-size: 14px;
  --el-input-border-color: #ccc;
  --el-input-border-radius: 16px;
  margin-right: 50px;
}
.search-input .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.search-input .el-input__icon {
  color: #999;
}
.search-input .el-input__clear {
  color: #999;
}
</style>